<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>积分查询</title>
    <style>
        body{ width: 100%; margin: 0; padding: 0; font-family: '微软雅黑';}
		body p{color:#949494; font-size:14px; padding-left:10px;}
        input::-ms-input-placeholder{text-align: center;}
		.header{ text-align: center; width: 100%; height: 40px; line-height: 40px; background-color:#F7F6F4; color:#4D4C4A;border-bottom: 1px solid #4D4C4A;

}
		.h-mid { width:100%; height:40px; float:left; text-align:center; color:#333; font-size:16px; line-height:45px; position:relative;}
		.h-mid span { color:#4D4C4A; font-size:12px;}
		.body{width:100%;}
		.total{padding-top:30px;width:200px;margin:0 auto;}
		.total span{color:#949494;float:left;padding-top:35px;font-size:14px;}
		.circle{width:90px;height:90px;border-radius:50px;border:solid #F9BC69 1px;background-color:#F9BC69; text-align:center;font-size:40px;line-height:90px;color:white;float:left; font-weight:bold;}
		.chargelsit{padding-top:10px;}
		.charge{position:relative;border:1px solid #949494; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;width:85%;}
		.left{margin:0 auto;margin-top:30px;margin-left:10%}
		.right{margin:0 auto;margin-top:10px;margin-right:10%; margin-bottom: 35px;}
		.chargecircleleft{position:absolute;left:-25px;width:50px;height:50px;font-size:23px;line-height:50px;}
		.chargecircleright{position:absolute;right:-25px;width:50px;height:50px;font-size:23px;line-height:50px; top:-10px;}
		.detailleft{padding-left:30px;padding-top:7px;padding-bottom:7px;font-size:14px;color:#949494}
		.detailright{padding-left:15px;padding-top:7px;padding-bottom:7px;font-size:14px;color:#949494}
        .detailright .date{ float: left; margin-right: 5%;}
		.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	height: 0;
}
.clearfix {
	zoom: 1;
}
    </style>
</head>
<body>
   <div class="header">
      	<div class="h-mid">
        	<span>积分查询</span>
      	</div>
    </div>
    <div class="body">
    	<div class="total clearfix">
        	<span>我的积分：</span><div class="circle">100</div>
        </div>
        <div class="chargelsit">
        	<div class="charge right">
            	<div class="circle chargecircleright">33</div>
                <div class="detailright">
                    <div class="date">2016-08-10</div>
                    <div class="type">积分类型：销售加点</div>
                </div>
            </div>
            <div class="charge right">
            	<div class="circle chargecircleright">23</div>
                <div class="detailright">
                    <div class="date">2016-08-09</div>
                    <div class="type">积分类型：销售加点</div>
                </div>
            </div>
            <div class="charge right">
            	<div class="circle chargecircleright">30</div>
                <div class="detailright">
                    <div class="date">2016-08-08</div>
                    <div class="type">积分类型：销售加点</div>
                </div>
            </div>
            <div class="charge right">
            	<div class="circle chargecircleright">18</div>
                <div class="detailright">
                    <div class="date">2016-08-07</div>
                    <div class="type">积分类型：销售加点</div>
                </div>
            </div>
            <div class="charge right">
            	<div class="circle chargecircleright">23</div>
                <div class="detailright">
                    <div class="date">2016-08-06</div>
                    <div class="type">积分类型：销售加点</div>
                </div>
            </div>
            <div class="charge right">
            	<div class="circle chargecircleright">39</div>
                <div class="detailright">
                    <div class="date">2016-08-04</div>
                    <div class="type">积分类型：销售加点</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>